<template> 
  <view class="project">
   
    <view class="header" v-if="!isEdit">
      <view class="header_left">
        <view class="name">
          <image src="@/static/images/index/build.svg" mode="" style="" />
          <view>{{ info.name }}</view>
        </view>

        <view
          class="address"
          style="display: flex; align-items: center"
          @click.stop="petName(info.buildingExt)"
          v-if="relationAliasNames"
        >
          <view class="buildings">{{ "项目别名:" + relationAliasNames }}</view>
          <view>
            <uni-icons
              :type="popupShow ? 'arrowup' : 'arrowdown'"
              size="14"
              color="#999;"
            ></uni-icons>
          </view>
        </view>
        <view class="address">{{ info.address }}</view>
      </view>
      <view class="header_right" @click="toAddress(info)">
        <image
          src="@/static/images/locations.png"
          class="close"
          style="width: 32rpx; height: 32rpx"
        ></image>
        <view>导航</view>
      </view>
    </view>
    <view class="content">
   
      <!-- 查看页面 -->
      <corrigendum-view
        v-if="!isEdit"
        ref="corrigendum-view"
        :buildingId="buildingId"
        @corrgendum="handleCorrgendum"
        :typeList="typeList"
      ></corrigendum-view>
      <!-- 勘误页面 -->
      <corrigendum-edit
        v-if="isEdit"
        ref="corrigendum-edit"
        :typeList="typeList"
        @stopScroll="overflowShow=true"
        @canScroll="overflowShow=false"
        @toView="toView"
      ></corrigendum-edit>
       
    </view>
   
    <!-- 项目别名弹框 -->
    <aliasPopup
      :showAlias="popupShow"
      :aliasArr="aliasArr"
      @closedMask="closedMask"
    ></aliasPopup>
    <previewMedia ref="previewMedia"></previewMedia>
  </view>

</template>

<script>
import corrigendumView from './corrigendum/view.vue';
import corrigendumEdit from './corrigendum/edit.vue';
import { projectDetail, addDetail } from '@/apis/project.js';
import { approveDetail } from '@/apis/approve.js';
import imageDragSort from '@/components/image-drag-sort/index.vue';
import unipopup from '@/components/uni-popup/uni-popup';
import AddElevtor from './components/add-elevtor.vue';
import amapFile from '../utils/amap-wx.js';  
import { mapState } from 'vuex'; 
import aliasPopup from '@/components/card-dial/aliasPopup.vue';
export default {
	components: {
		unipopup,
		AddElevtor,
		imageDragSort,
		corrigendumView,
		corrigendumEdit,
		aliasPopup,
	},
	data() {
		return {
			overflowShow:false,
			closeFlag: true,
			isEdit: true,
			buildingId: '',
			info: {},
			total: 0,
			typeList: [
				'',
				'小区',
				'别墅',
				'商超',
				'酒店/民宿',
				'学校',
				'医院',
				'工厂',
				'其他',
				'办公楼',
				'政府单位',
				'公共设施',
				'出租房',
			],
			imgBoxList: [],
			status: 0, // 项目信息
			businessApproveId: '', // 审批工单id
			oldObj: {},
			showAddress: false,
			showLocation: false,
			// provinceName:'',
			// cityName:'',
			// adName:''
			isEdit: false,
			relationAliasNames: '', // 别名字符串
			aliasArr: [],
			popupShow: false,
		};
	},

	onLoad(opt) {
		console.log(opt, 'opt的值');
		if (opt.type == '0') {
			this.isEdit = false;
			console.log('项目信息进来的');
			this.buildingId = opt.id;
			// this.getProjectInfo();
		} else {
			console.log('审批进来的');
			this.businessApproveId = opt.id;
			// this.getApproveDetail();
		}
	},
	created() {},
	onShow(e) {
		setTimeout(() => {
			console.log(e, 'onshowssssss',this.buildingId,this.businessApproveId);
			if (!this.isEdit) {
				this.getProjectInfo();
			} else {
				this.getApproveDetail();
			}
		},500);
	},
	computed: {
		...mapState('user', ['userinfo']),
    
	},
	methods: {
		getAliasStr(str) {
			if (!str) {
				return '';
			}
			if (str.length > 20) {
				return '(项目别名：' + str.slice(0, 20) + '...)';
			} else {
				return '(项目别名：' + str + ')';
			}
		},
		// 导航
		toAddress({ latitude, longitude, name, buildingExt,address }) {
			let aliasesName =
        buildingExt.relationAliases == null
        	? ''
        	: buildingExt.relationAliases
        		.map((item) => {
        			return item.alias;
        		})
        		.join(',');  

			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude),
				name:name + this.getAliasStr(aliasesName),
				address,
				scale: 18,
			});
		},
		// 回到查看页面
		toView() {
			this.isEdit = false;
			this.getProjectInfo();
		},
		// 点击勘误
		handleCorrgendum() {
			this.isEdit = true;
			this.$nextTick(() => {
				this.$refs['corrigendum-edit'].init(this.info, this.oldObj);
			});
		},
		// 校验电话号码不能是数字
		changePhone(e) {
			//   console.log(e);
			const inputTypeNum = /[^\d]/g; // 数字
			this.$nextTick(() => {
				this.info.phone = e.target.value.replace(inputTypeNum, '');
			});
		},
		// 获取原来项目信息
		getProjectInfo() {
			projectDetail({ buildingId: this.buildingId }).then((res) => {
				// console.log(res,'信息')
				if (res) {
					this.info = res.data;
					this.total = this.info.eleTotal;
					this.oldObj = JSON.parse(JSON.stringify(res.data)); // 深拷贝一下原始数据
					// this.imgBoxList=this.info.imgUrl
					this.info.buildingExt.relationAliases == null
						? []
						: this.info.buildingExt.relationAliases;
					this.relationAliasNames = this.info.buildingExt.relationAliases
						.map((item) => {
							return item.alias;
						})
						.join(',')
						.replaceAll(',', ';');
					if (!this.isEdit) { 
						this.$nextTick(() => {
							this.$refs['corrigendum-view'].init({
								...this.info,
								status: this.status,
							});
						});
					} else {
						this.$nextTick(() => {
							this.$refs['corrigendum-edit'].init(this.info, this.oldObj);
						});
					}
				}
			});
		},
		// 获取已提交项目信息
		getApproveDetail() {
			if (!this.businessApproveId) {
				return;
			}
			uni.showLoading({
				title: '加载中',
			});
			approveDetail({ businessApproveId: this.businessApproveId }).then(
				(res) => {
					if (res) { 
						this.info = res.data.buildingSubmitVO;
						this.status = res.data.approveStatus;
						this.imgBoxList = this.info.imgUrl;
						uni.hideLoading();
					}
				}
			);
		},
		bindPickerChange(e) { 
			this.info.type = e.detail.value;
		},
		close() { 
			this.closeFlag = false;
		},
		// 增加梯数
		handleAdd() {
			if (this.isEdit) {
				return;
			} else {
				if (this.total >= this.info.eleTotal) {
					this.$refs.addElevtor.open();
				} else {
					this.total = this.total + 1;
				}
			}
		},
		// 减少梯数
		handleSubtraction() {
			if (this.isEdit) {
				return;
			} else {
				console.log('减少');
				if (this.total < 2) {
					uni.showToast({
						title: '电梯数量不能少于1',
						icon: 'none',
					});
					return;
				}
				this.total = this.total - 1;
			}
		},

		// 保存
		handleSave() {
			uni.showModal({
				confirmColor: '#0091ff',
				title: '提示',
				content: '是否确认提交勘误',
				success: (res) => {
					if (res.confirm) { 
						if (!this.checkForm) {
							uni.showToast({
								title: '数据未修改',
								icon: 'none',
							});
							return;
						}
						if (
							!this.info.phone ||
              !this.info.contactsName ||
              !this.info.type ||
              !this.info.address
						) {
							uni.showToast({
								title: '信息未完整',
								icon: 'none',
							});
							return;
						} else {
							// console.log('可以提交')
							// return
							if (!this.isEdit) {
								uni.showLoading({
									title: '提交中',
								});
								this.info.eleTotal = this.total;
								this.info.imgUrl = this.imgBoxList;
								addDetail({
									...this.info,
									submitId: this.userinfo.user_id,
									buildingId: this.buildingId,
								}).then((res) => { 
									if (res) {
										uni.hideLoading();
										this.info = res.data.buildingSubmitVO;
										this.status = res.data.approveStatus;
										this.total = this.info.eleTotal;
										this.imgBoxList = this.info.imgUrl || [];
										this.isEdit = true;
									}
								});
							}
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
		},
		// handleCorrgendum() {
		//   console.log(1225);
		//   this.isEdit = false;
		// },
		handleClose() {
			this.$refs.addElevtor.close();
		},
		handleComfire(res) {
			// console.log(res,'接受')
			if (this.imgBoxList.length) {
				this.imgBoxList = [...this.imgBoxList, ...res];
			} else {
				this.imgBoxList = res;
			}
			this.total = this.total + 1;
			this.$refs.addElevtor.close();
		},
		editLocation() {
			if (this.isEdit) {
				return;
			}
			uni.chooseLocation({
				success: (res) => {
					this.info.latitude = res.latitude;
					this.info.longitude = res.longitude;
					this.getAddress();
					this.info.locationAddress = res.address + res.name;
					this.showLocation = true;
				},
			});
		},
		previewImage(i, list) {
			// 预览图片
			this.$previewMedia({
				current: i,
				sources: list,
			});
		},
		// 操作图片
		handleImg(index) {
			// 如果是未提编辑状态可以修改
			let itemList = [];
			if (this.status === 0 && !this.isEdit) { 
				itemList = ['查看大图', '删除'];
			} else {
				// console.log('审批')
				itemList = ['查看大图'];
			}
			uni.showActionSheet({
				itemList: itemList,
				success: (res) => { 
					// 如果是查看大图
					if (res.tapIndex == 0) {
						this.previewImage(index, this.imgBoxList);
					}
					// 如果是删除
					if (res.tapIndex == 1) {
						this.imgBoxList.splice(index, 1);
					}
				},
			});
		},
		// 反查地址
		getAddress() {
			var myAmapFun = new amapFile.AMapWX({
				key: 'e02bf0709360ff81bd0b6bdf7cc9762e',
			});
			myAmapFun.getRegeo({
				location: `${this.info.longitude},${this.info.latitude}`,
				success: (res) => { 
					this.info.provinceName =
            res[0].regeocodeData.addressComponent.province;
					this.info.cityName = res[0].regeocodeData.addressComponent.city;
					this.info.adName = res[0].regeocodeData.addressComponent.township;
					// console.log(this.provinceName,this.cityName,this.adName,3333)
				},
				fail: (res) => { 
				},
			});
		},
		// 项目别名弹窗
		petName(obj) {
			this.popupShow = true;
			this.overflowShow = true;
			this.aliasArr = (obj.relationAliases || []).map((item) => item.alias);
		},
		closedMask(e) {
			this.popupShow = false;
			this.overflowShow = false;
		},
	},
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #fff;
}

uni-picker .uni-picker-action.uni-picker-action-confirm {
  color: #57dbd0 !important;
}

.project {
  font-size: 28rpx;
  background-color: #f3f6f8;
  min-height: 100vh;
  .header {
    // position: fixed;
    // z-index: 300;
    // width: 100%;
    display: flex;
    padding: 34rpx 20rpx 32rpx 28rpx;
    background: #fff;
    .header_left {
      width: 604rpx;

      .name {
        color: #333;
        font-weight: 600;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 12rpx;
        }
        view {
          width: 544rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .address {
        width: 604rpx;
        box-sizing: border-box;
        padding-left: 60rpx;
        color: #999;
        font-size: 24rpx;
        .buildings {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 550rpx;
          color: #666;
          font-size: 20rpx;
        }
      }
    }
    .header_right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      font-size: 24rpx;
      color: #666;
    }
  }
  .tips {
    color: #ff7505;

    .tips_text {
      display: flex;
      align-items: center;
    }

    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    background: #fffadf;
    height: 80rpx;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    .close {
      padding: 30rpx 0 30rpx 30rpx;
    }
  }

  .content {
    // display: flex;
    // justify-content: center;
    // // height: 1082rpx;
    // flex-direction: column;
    // align-items: center;
    // padding-bottom: 100rpx;
    // // margin-bottom: 100rpx;

    &-header {
      width: 710rpx;
      .location {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 24rpx;
        color: #666;
        font-weight: 400;
        flex: 1;
        justify-content: center;
        // :nth-child(2){
        // 	text-align: right;
        // 	color: #FF7505;
        // }
      }

      &-title {
        // width: 414rpx;
        // height: 58rpx;
        font-size: 42rpx;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #333333;
        text-align: left;
        margin: 32rpx 0 0 0;
        display: flex;
        justify-content: space-between;
        .name {
          width: 550rpx;
        }
      }

      &-address {
        display: flex;
        // justify-content: flex-end;
        justify-content: space-between;
        .address_item {
          display: flex;
          flex: 1;
        }
        .old {
          color: #999999;
          display: flex;
        }
        .new {
          color: #ff7505;
          display: flex;
          justify-content: flex-end;
          text-align: right;
          flex: 1;
        }
        // view{
        //     // width: 400rpx;
        // 	font-size: 24rpx;
        // 	font-family: PingFangSC, PingFangSC-Regular;
        // 	font-weight: 400;
        // 	display: flex;
        // 	color: #FF7505;
        // 	justify-content: flex-end;
        // 	 // text-align: right;
        // }

        // width: 400rpx;
        // line-height: 34rpx;
      }
    }

    .title {
      display: flex;
      height: 110rpx;

      view {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
      }
    }

    .form-content {
      width: 710rpx;
      box-sizing: border-box;
      background: #fff;
      margin: 0rpx 0 20rpx 0;
      padding: 0 20rpx;
      border-radius: 8rpx;
      .address {
        textarea {
          min-height: 60rpx;
          width: 100%;
          height: 100rpx;
          align-items: center;
          display: flex;
          align-items: center;
          text-align: right;
        }
      }
      .form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // padding: 40rpx 0rpx;

        border-bottom: 2rpx solid #e9e9e9;

        .unit {
          margin-left: 4rpx;
        }

        .left {
          height: 118rpx;
          font-size: 28rpx;
          color: #999;
          width: 170rpx;
          display: flex;
          align-items: center;
          text {
            color: red;
            padding: 5rpx;
          }

          image {
            width: 28rpx;
            height: 28rpx;
            margin-left: 10rpx;
          }
        }
        .right {
          min-height: 118rpx;
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: flex-end;

          view:nth-child(1) {
            display: flex;
            height: 100%;
            align-items: center;
            width: 100%;
            justify-content: flex-end;
            text-align: right;
          }

          input {
            text-align: right;
            width: 100%;
          }

          text {
            color: #999;
          }
        }
        .count {
          width: 218rpx !important;
          display: flex;
          height: 118rpx;
          align-items: center;
          justify-content: flex-end;
          input {
            display: flex;
            flex: 1;
            text-align: center;
            box-sizing: border-box;
            height: 60rpx;
            border-top: 2rpx solid #d3dbe1;
            border-bottom: 2rpx solid #d3dbe1;
          }
          view {
            display: flex;
            width: 60rpx;
            height: 60rpx;
            color: #828e96;
            align-items: center;
            box-sizing: border-box;
            justify-content: center;
            background: #f3f6f8;
            border: 2rpx solid #d3dbe1;
            // border-radius: 4rpx 0rpx 0rpx 4rpx;
          }
        }
      }
      .addNotice {
        display: flex;
        flex-direction: column;
        .addNotice-title {
          width: 100%;
          align-items: flex-start;
          padding: 20rpx 0 28rpx 0;
          color: #999999;
        }
        .border {
          border: 2rpx solid #e9e9e9;
        }

        .imgBox {
          padding-bottom: 40rpx;
          margin: 0 20rpx;
          width: 100%;
          image {
            width: 112rpx;
            height: 112rpx;
            // border: 1rpx solid #ccc;
            margin-right: 18rpx;
          }
          textarea {
            width: 630rpx;
            margin: 20rpx;
          }
          .lenthTips {
            margin-right: 20rpx;
            color: #ccc;
            // width: 100%;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
  }

  .save {
    display: flex;
    justify-content: center;
    padding: 14rpx 0;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 50;

    view {
      width: 710rpx;
      background: #0091ff;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      color: #fff;
    }
    .disable {
      background-color: #efefef;
      color: #cccccc;
    }
  }
}
</style>
